import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Layout } from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import styles from './index.less';

const { Content } = Layout;

/**
 * 倒计时页面
 * <Coming
 title="精彩即将呈现"
 value={Date.now() + 1000 * 60 * 60 * 24 * 2}
 />
 */
function formatDoubleStr(number) {
  return number < 10 ? `0${number}` : number;
}
class Index extends Component {
  static propTypes = {
    title: PropTypes.string, //精彩即将呈现的标题
    value: PropTypes.number, //即将开始的时间点的时间戳，单位毫秒
  };

  static defaultProps = {
    title: '精彩即将呈现',
    value: Date.now() + 1000 * 60 * 60 * 24 * 2,
  };

  state = {
    days: '00',
    hours: '00',
    minutes: '00',
    seconds: '00',
  };

  countdownId = null;

  componentDidMount() {
    this.syncTimer();
  }

  componentDidUpdate() {
    this.syncTimer();
  }

  componentWillUnmount() {
    this.stopTimer();
  }

  syncTimer = () => {
    const { value } = this.props;

    const timestamp = moment(value).valueOf();
    if (timestamp >= Date.now()) {
      this.startTimer();
    } else {
      this.stopTimer();
    }
  };

  startTimer = () => {
    const { value } = this.props;

    if (this.countdownId) return;

    this.countdownId = window.setInterval(() => this.parseTime(value), 500);
  };

  stopTimer = () => {
    clearInterval(this.countdownId);
    this.countdownId = null;
  };

  parseTime = value => {
    const target = moment(value);
    const current = moment();
    const diffTime = Math.max(target - current, 0);
    const duration = moment.duration(diffTime, 'milliseconds');

    this.setState({
      days: formatDoubleStr(duration.days()),
      hours: formatDoubleStr(duration.hours()),
      minutes: formatDoubleStr(duration.minutes()),
      seconds: formatDoubleStr(duration.seconds()),
    });
  };

  render() {
    const { title } = this.props;
    const { days, hours, minutes, seconds } = this.state;
    const clsString = classNames('full-layout', styles['coming-soon-page']);
    return (
      <Layout className={clsString}>
        <Content>
          <div id="wrapper">
            <div className={styles.place_balk_workers}>
              <div className={styles.balk_workers} />
              <div className={styles.saw} />
              <div className={styles.balk} />
            </div>
            <div className={styles.title}>{title}</div>
            <div id="watch" className={styles.watch}>
              <div className={classNames(styles.dash, 'days_dash')}>
                <div className={styles.digit}>{days}</div>
                <span className={styles.dash_title}>天</span>
              </div>
              <div className={classNames(styles.dash, 'hours_dash')}>
                <div className={styles.digit}>{hours}</div>
                <span className={styles.dash_title}>时</span>
              </div>
              <div className={classNames(styles.dash, 'minutes_dash')}>
                <div className={styles.digit}>{minutes}</div>
                <span className={styles.dash_title}>分</span>
              </div>
              <div className={classNames(styles.dash, 'seconds_dash')}>
                <div className={styles.digit}>{seconds}</div>
                <span className={styles.dash_title}>秒</span>
              </div>
            </div>
          </div>
        </Content>
      </Layout>
    );
  }
}

export default Index;
